<template>
    <div>
        <el-form
                ref="form"
                :inline="true"
                class="demo-form-inline"
                :model="queryModel"
                label-width="20px"
        >
            <el-form-item label="关键字" label-width="80">
                <el-input v-model="queryModel.keyword"></el-input>
            </el-form-item>
            <el-form-item label="类型名" label-width="80">
                <el-input v-model="queryModel.articleType"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="ui-select" icon="el-icon-search" @click="toSearch">查询</el-button>
            </el-form-item>
            <el-form-item class="right-btn">
                <el-button type="success" @click="openDailog(null,1)" icon="el-icon-plus">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="table.list" border class="table-style" style="width: 100%"
                  v-loading="loadData">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="typeName" label="类型名称"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="orderIndex" label="排序"></el-table-column>
            <el-table-column prop="url" label="跳转路径"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间"></el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" @click="openDailog(scope.row,2)">编辑</el-button>
                    <el-button type="danger" @click="toDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination style="position: relative;margin-top: 40px "
                    :total="table.total"
                    :page.sync="queryModel.pageNo"
                    :limit.sync="queryModel.pageSize"
                    @pagination="pagination"
        ></pagination>
        <!--    添加编辑弹框-->
        <el-dialog
                :title="type ==1? '添加':'修改'"
                :visible.sync="dialogVisible"
                width="40%"
                center
        >

            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="类型名称" prop="typeName">
                    <el-input v-model="form.typeName"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="orderIndex">
                    <el-input v-model="form.orderIndex"></el-input>
                </el-form-item>
                <el-form-item label="跳转网址" prop="url">
                    <el-input v-model="form.url"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    import Api from '@/api/newsType'

    export default {
        name: "index",
        data() {
            return {
                loadData: false,
                queryModel: {
                    page: 1,
                    pageSize: 10,
                },
                table: {
                    total: 0,
                    list: []
                },
                dialogVisible: false,
                type: 1, //1添加 2 修改
                form: {},
                rules: {
                    typeName: [
                        {
                            required: true,
                            message: '请输入类型名称',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            async loadPage() {
                this.loadData = true;
                let res = await Api.list(this.queryModel);
                if (res) {
                    this.table.list = res.data;
                    this.table.total = res.total
                    this.loadData = false;
                }
            },
            toDelete(data) {
                this.$confirm("确定要删除吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "info"
                }).then(() => {
                    const params = {
                        id: data.id
                    }
                    Api.remove(params)
                        .then(() => {
                            this.$message({type: "success", message: "删除成功!"});
                            this.loadPage(); //加载列表
                        })
                        .catch(data => {
                            this.$message({type: "warning", message: data.msg});
                        });
                })
                    .catch(() => {
                    });
            },
            toSearch() {
                this.queryModel.pageNo = 1;
                this.loadPage();
            },
            pagination(page) {
                this.queryModel.pageNo = page.page;
                this.loadPage()
            },
            openDailog(row,type) {
                this.form = row || {}
                this.type = type
                this.dialogVisible = true
            },
            submit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const  parmas = {
                            ...this.form,
                        }
                        if (this.type ==1) {
                            parmas.createUser = this.$store.getters.userInfo.id
                            Api.add(parmas).then(() => {
                                this.$message.success('保存成功')
                                this.dialogVisible = false
                                this.loadPage()
                            }).catch(err=> {
                                this.$message.error(err.msg)
                            })
                        } else {
                            Api.update(parmas).then(() => {
                                this.$message.success('保存成功')
                                this.dialogVisible = false
                                this.loadPage()
                            }).catch(err=> {
                                this.$message.error(err.msg)
                            })
                        }
                    } else {
                        return false;
                    }
                });
            }
        },
        created() {
            this.loadPage()
        }
    }

</script>

<style scoped>

</style>
